<template>
  <div class="content_box">
    <div class="pop_box1" v-if="isShow">
      <p :style="{height:statusBarHeight+'px'}"></p>
      <div class="box" :style="{height:titleBarHeight+'px'}">
        <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230713/e72BeVwBw5hukiDk1jO2.png" alt="">
      </div>
    </div>
    <!-- 顶部背景图片 -->
    <div class="head_box">
      <swiper 
        class="swiper" 
        autoplay="true" 
        interval="3000" 
        duration="1000" 
      >
        <swiper-item>
          <van-image
            width="100%"
            height="366rpx"
            fit="cover"
            widthFix
            lazy-load
            src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/lv1oV6Z1fd1Ozg0ugvhF.png"
          />
        </swiper-item>
        <swiper-item>
          <van-image
            @click="toPinglun"
            width="100%"
            height="366rpx"
            fit="cover"
            widthFix
            lazy-load
            src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230115/20231213165825.jpg"
          />
        </swiper-item>
      </swiper>
    </div>

    <!-- 弹窗 -->
    <div class="pop_box" v-if="storeMsg.underwayOrderList&&storeMsg.underwayOrderList.length">
      <van-popup position="bottom" :show="isOpen" @close="isOpen = false">
        <div class="box">
          <div class="title">
            <p>开门</p>
            <p class="tb" @click="isOpen = false"><van-icon name="cross" /></p>
          </div>
          <div class="list" v-for="(item,index) in storeMsg.underwayOrderList" :key="index">
            <p class="name">{{item.roomName}}</p>
            <p class="icon" @click="openDoor(1,item.orderId)">
              去开门
            </p>
          </div>
        </div>
      </van-popup>
    </div>

    <!-- 续单 -->
    <div class="pop_box" v-if="storeMsg.underwayOrderList&&storeMsg.underwayOrderList.length">
      <van-popup position="bottom" :show="isXudan" @close="isXudan = false">
        <div class="box">
          <div class="title">
            <p>续单</p>
            <p class="tb" @click="isXudan = false"><van-icon name="cross" /></p>
          </div>
          <div class="list" v-for="(item,index) in storeMsg.underwayOrderList" :key="index">
            <p class="name">{{item.roomName}} <span>({{item.endObj.month}}月{{item.endObj.ri}}日({{item.endObj.week}}) {{item.endObj.hours}}:{{item.endObj.minutes}} 结束)</span></p>
            <p class="icon" @click="toXudan(item)">
              去续单
            </p>
          </div>
        </div>
      </van-popup>
    </div>

    <!-- 提前入场 -->
    <div class="pop_box" v-if="storeMsg.underwayOrderList&&storeMsg.underwayOrderList.length">
      <van-popup position="bottom" :show="isRuchang" @close="isRuchang = false">
        <div class="box" >
          <div class="title">
            <p>提前入场</p>
            <p class="tb" @click="isRuchang = false"><van-icon name="cross" /></p>
          </div>
          <div class="list" v-for="(item,index) in storeMsg.underwayOrderList" :key="index">
            <p class="name">{{item.roomName}}</p>
            <p class="icon" @click="toRuchang(item)">
              去提前
            </p>
          </div>
          <!-- <p class="line"></p>
          <p class="quxiao" @click="isRuchang = false">取消</p> -->
        </div>
      </van-popup>
    </div>

    
    <div class="store_msg_box" id="userinfodesc2">
      <div class="msg_box">
        <img src="/static/images/store_bj.png" alt="">
        <div class="msg">
          <div class="name_box">
            <p class="name">{{storeMsg.storeName}}</p>
            <div class="label_box">
              <p>有停车位</p>
              <p>免费Wi-Fi</p>
              <p>智慧共享</p>
            </div>
          </div>
        </div>
        <div class="dz">
          {{storeMsg.address}}
        </div>
      </div>
      <div class="juli">
        <p class="num" v-if="storeMsg.distance">
          <img src="/static/images/dz.png" alt="">
          距您{{storeMsg.distance}}
        </p>
        <p class="num" v-else>
          <img src="/static/images/dz.png" alt="">
          未获取位置
        </p>
        <div class="anniu">
          <p @click="onGuideTap"><img src="/static/images/home_dh.png" alt="">导航</p>
          <p @click="kefuPop"><img src="/static/images/home_tell.png" alt="">电话</p>
        </div>
      </div>
    </div>

    <div class="three_box">
      <div class="left" @click="seeUseOrder(0)">
        <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/Md1gFSsMMgNLt4aD9RxS.png" alt="">
        <div class="nr">
          <p class="name">开门</p>
          <p class="text">智能互联,手机一键开门</p>
          <p class="anniu">立即开门<span v-if="orderNumMsg.openOrder">{{orderNumMsg.openOrder}}</span></p>
        </div>
      </div>
      <div class="right">
        <div class="box" @click="seeUseOrder(1)">
          <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/e6d7gBojIX6CNBfO8KYZ.png" alt="">
          <div class="nr">
            <p class="name">续单<span v-if="orderNumMsg.reorder"></span></p>
            <p class="text on" v-if="orderNumMsg.reorder">有笔订单将在 {{orderNumMsg.endTime}} 结束 </p>
            <p class="text" v-else>没玩尽兴？即可续单</p>
          </div>
        </div>
        
        <div class="box" @click="seeUseOrder(2)">
          <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/e6d7gBojIX6CNBfO8KYZ.png" alt="">
          <div class="nr">
            <p class="name">提前入场</p>
            <p class="text">提前时间以包厢可用</p>
          </div>
        </div>
      </div>
    </div>
    <p class="dh_fl" @click="toFl">
      <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230115/20240120010823.png" alt="">
    </p>
    <div class="tab_box">
      <div class="star_box" @click="toStar">
        <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20240124/whbE4AfIBxBrU9MRCakX.png" alt="">
        <div class="star">
          <div class="title_box">
            <p class="line"></p>
            <p class="title">攒星兑礼</p>
          </div>
          <div class="xx">
            <p v-for="(item,index) in pointMsg.userStarRecordList" :key="index">
              <span>{{item.orderNum}}</span>
              <img v-if="item.orderNum" src="/static/images/dk_star.png" alt="">
              <img v-else src="/static/images/hui_star.png" alt="">
            </p>
          </div>
        </div>
        <div class="time_box">
          <div class="left">
            <p class="time">01-01至12-25</p>
            <p class="text">打4场<span>送1场</span></p>
          </div>
          <div class="right">
            已攒<span>{{pointMsg.starValue}}</span><van-icon name="arrow" />
          </div>
        </div>
      </div>
      <div class="tab">
        <div class="box" @click="toNovice">
          <img src="/static/images/home_icon1.png" alt="">
          <p class="text">新手指南</p>
        </div>
        <div class="box" @click="toWriteOff">
          <img src="/static/images/home_icon2.png" alt="">
          <p class="text">团购验券</p>
        </div>
        <div class="box" @click="toJifen">
          <img src="/static/images/home_icon3.png" alt="">
          <p class="text">会员储值</p>
        </div>
        <div class="box" @click="kefuPop">
          <img src="/static/images/home_icon4.png" alt="">
          <p class="text">联系店铺</p>
        </div>
      </div>
    </div>

    <!-- 房间列表 -->
    <div class="list_box">
      <div class="title_box">
        <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/aZmapmXEZW3L8hClBJ9K.png" alt="">
      </div>
      <div @click="toRoom(item)" class="box" v-for="(item,index) in list" :key="index">
        <div class="box_b">
          <div class="img">
            <van-image
              width="220rpx"
              height="100%"
              fit="cover"
              lazy-load
              radius="20rpx"
              :src="item.roomImg && item.roomImg.length?item.roomImg[0]:''"
            />
            <p class="mc on" v-if="item.status == 'use'">消费中{{item.endTime}}结束</p> 
            <p class="mc on1" v-if="item.status == 'free'">空闲中</p> 
            <p class="mc on2" v-if="item.status == 'due'">已预定{{item.endTime}}结束</p> 
            <p class="mc on3" v-if="item.status == 'clear'">等待保洁打扫</p>
            <p class="mc on4" v-if="item.status == 'stop'">整备中</p>
          </div>
          <div class="right">
            <div class="msg">
              <div class="left">
                <p class="name">{{item.roomName}} ({{item.roomTypeName}})</p> 
                <div class="label_box">
                  <p v-for="(child,i) in item.labelList" :key="i">{{child.labelName}}</p>
                </div>
              </div>
            </div>
            <div class="price_box">
              <div class="price">
                <p class="old close">原价￥{{item.originalPrice}}/小时</p>
                <p class="old">现价￥<span>{{item.price}}</span>/小时</p>
                <p class="new"><span class="tc">套餐</span>￥<span class="num">{{item.roomThaliPrice.price}}</span>/{{item.roomThaliPrice.hours}}小时</p>
              </div>
              <div>
                <p class="num1">已售{{item.sales}}</p>
                <p class="anniu" v-if="item.status != 'stop'">预定</p>
                <p class="anniu on" v-else>预定</p>
              </div>
            </div>
          </div>
        </div>
        <div class="yd_box" @click.stop="ydClick(item.timeSlotList)" v-if="item.recentlyYyMsg && item.recentlyYyMsg.endTime">
          <p>
            <img src="/static/images/home_icon6.png" alt="">
          {{item.recentlyYyMsg.startObj.month}}月{{item.recentlyYyMsg.startObj.ri}}日({{item.recentlyYyMsg.startObj.week}}) {{item.recentlyYyMsg.startObj.hours}}:{{item.recentlyYyMsg.startObj.minutes}} ~ {{item.recentlyYyMsg.endObj.hours}}:{{item.recentlyYyMsg.endObj.minutes}}
          </p>
          <p>查看更多<van-icon name="arrow" /></p>
        </div>
      </div>
    </div>

    <div class="yy_pop_box">
      <van-popup :show="ydShow">
        <div class="box">
          <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/DjzK7082ACUEA237aP38.png" alt="">
          <div class="nr">
            <div class="nr_box">
              <div :class="item.status == 0?'list':'list on'" v-for="(item,index) in ydList" :key="index">
                <p class="line"></p>
                <div class="time_box">
                  <p class="quan"></p>
                  <div class="time">
                    <img v-if="item.status == 0" src="/static/images/kuang1.png" alt="">
                    <img v-else src="/static/images/kuang2.png" alt="">
                    <p class="text">{{item.startObj.month}}月{{item.startObj.ri}}日({{item.startObj.week}}) {{item.startObj.hours}}:{{item.startObj.minutes}}-{{item.endObj.hours}}:{{item.endObj.minutes}} <span>{{item.status == 0?'预定中':'消费中'}}</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <p class="anniu" @click="ydShow = false">我知道了</p>
        </div>
      </van-popup>
    </div>

    <!-- 联系客服 -->
    <div class="wifi_pop">
      <van-popup :show="kefuShow">
        <div class="box">
          <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230713/RpoflPSDlfvw6BsjHE0z.png" alt="">
          <div class="nr1">
            <button type="primary" open-type="contact">
              <div class="img">
                <p class="img1">
                  <img src="/static/images/pop_kf.png" alt="">
                </p>
                <p class="text">在线客服</p>
              </div>
            </button>
            <button @click="callPhone">
              <div class="img">
                <p class="img2">
                  <img src="/static/images/pop_tell.png" alt="">
                </p>
                <p class="text">电话客服</p>
              </div>
            </button>
          </div>
          <p class="anniu1" @click="kefuShow = false">取消</p>
        </div>
      </van-popup>
    </div>

    <div class="wifi_pop huodong_pop" v-if="couponMsg && couponMsg.activityStuffVo">
        <van-popup :show="huodongShow">
            <div class="box">
                <img class="bj" :src="couponMsg.popupImg"
                    alt="">
                <div class="nr2">
                  <div class="nr2_box">
                    <!-- 折扣券 -->
                    <div class="left" v-if="couponMsg.activityStuffVo.couponType == 1">
                      <p><span>{{couponMsg.activityStuffVo.discount}}</span>折</p>
                      *{{couponMsg.activityStuffVo.receiveNum}}张
                    </div>

                    <!-- 指定金额 -->
                    <div class="left" v-if="couponMsg.activityStuffVo.couponType == 0">
                      <p><span>{{couponMsg.activityStuffVo.amount}}</span>元</p>
                      *{{couponMsg.activityStuffVo.receiveNum}}张
                    </div>

                    <!-- 满减券 -->
                    <div class="left" v-if="couponMsg.activityStuffVo.couponType == 2">
                      <p><span>{{couponMsg.activityStuffVo.subtract}}</span>元</p>
                      *{{couponMsg.activityStuffVo.receiveNum}}张
                    </div>
                    <div class="right">
                      <p class="name">{{couponMsg.activityStuffVo.stuffName}}</p>
                      <p class="text">{{couponMsg.activityStuffVo.remark}}</p>
                    </div>  
                  </div>
                </div>
              <div class="anniu2" @click="toHuodong">
                <p>一键领取</p>
              </div>
            </div>
            <p class="close" @click="huodongShow = false">
                <img src="/static/images/close1.png" alt="">
            </p>
        </van-popup>
    </div>

    <p class="nodata">没有更多的房间~</p>
  </div>
</template>

<script>
import { 
  getUserPhone,
  setLatitude,
  setLongitude,
  getLatitude,
  getLongitude,
} from "@/utils/auth";
import { 
  getStoreDetails,
  getRoomByStoreId,
  orderUnLock,
  entryJudge,
  getUserAgreement,
  getAllStore,
  unStoreLock,
  getOrderNum,
  getForFreeCoupon,
  getUpActivity,
  getSuggestActivity,
  getUserStarRecord
} from "@/api/index";
import { Debounce,minTime } from "@/utils"
export default {
  data(){
    return{
      huodongShow:false,
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      storeMsg:{},
      isOpen:false,
      isXudan:false,
      list:[],
      openClick:false,
      xieyiShow:false,
      isRuchang:false,
      judgeList:[],
      kefuShow:false,
      isShow:false,
      ydShow:false,
      ydList:[],
      latitude:0,
      longitude:0,
      orderNumMsg:{},
      couponList:[],
      couponMsg:{},
      pointMsg:{}
    }
  },
  
  methods: {
    // 跳转评论
    toPinglun(){
      wx.navigateTo({
        url: `/pages/pinglun/main`
      });
    },

    // 获取攒星日期
    getStarMsg(){
      getUserStarRecord().then(res=>{
        if(res.statusCode == '00000'){
          let arr = []
          let length = res.data.userStarRecordList.length
          if(res.data.userStarRecordList.length < 12){
            for(let i = 0 ; i < 12 - length ; i++){
              arr.push(i)
            }
            res.data.userStarRecordList = res.data.userStarRecordList.concat(arr)
          }else{
            res.data.userStarRecordList = res.data.userStarRecordList.slice(0,12)
          }
          this.pointMsg = res.data
          console.log(this.pointMsg)
        }
      })
    },

    // 查询是否推荐活动
    getHongDong(){
      getSuggestActivity().then(res=>{
        if(res.statusCode == '00000'){
          if(res.data && !res.data.receive){
            this.couponMsg = res.data
            this.huodongShow = true
          }else{
            this.huodongShow = false
            this.couponMsg = {}
          }
        }
      })
    },

    // 跳转攒星
    toStar(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.requestSubscribeMessage({
        tmplIds: ['2ngW_IdrZ7m60X7zq-e1I-mFO47Wgdqw6bAGXlkG42c'],
        success: (res) => {
          wx.navigateTo({
            url: `/pages/daka/main`,
          });
        },
        fail: (res) => {
          console.log(res)
          if (res.errCode == 20004) {
            that.guideOpenSubscribeMessage();
          }
          console.log("取消")
        },
        complete: (errMsg) => {
            console.log("订阅消息 完成 " + errMsg); 
        }
      })
      
    },

    // 跳转福利
    toFl(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/fuli/main`,
      });
    },

    // 跳转活动
    toHuodong(){
      wx.navigateTo({
        url: `/pages/huodong/main?activityId=${this.couponMsg.id}`,
      });
    },

    // 预定弹窗
    ydClick(item){
      console.log(item)
      this.ydShow = true
      this.ydList = item
    },

    //导航
    onGuideTap() {
      wx.openLocation({
        address: this.storeMsg.address,
        name: this.storeMsg.storeName,
        longitude: +this.storeMsg.longitude,
        latitude: +this.storeMsg.latitude,
        scale: 16
      })
    },

    // 客服电话
    callPhone() {
      wx.makePhoneCall({
        phoneNumber: this.storeMsg.mobile //仅为示例，并非真实的电话号码
      })
    },

    getElInfo() {
      var that = this;
      const query = wx.createSelectorQuery();
      query.select('#userinfodesc2').boundingClientRect(data => {
        if(data.top < 0){
          that.isShow = true
        }else{
          that.isShow = false
        }
      }).exec();
    },

    // 客服
    kefuPop(){
      this.kefuShow = true
    },
    closeKefu(){
      this.kefuShow = false
    },

    // 跳转协议
    toXieyi(){
      wx.navigateTo({
        url: `/pages/xieyi/main?storeId=${this.storeMsg.storeId}`,
      });
    },

    // 右边操作
    seeUseOrder(num){
      this.$showLoading('加载中...')
      let title = ''
      let data = {
        storeId:this.storeMsg.storeId,
        orderType:num
      }
      getStoreDetails(data).then(res=>{
        if(res.statusCode == '00000'){
          this.storeMsg = res.data
          wx.hideLoading()
          if(res.data.underwayOrderList.length){
            res.data.underwayOrderList.map(child=>{
              child.startObj = this.getYearMonthDay(child.startTime)
              child.endObj = this.getYearMonthDay(child.endTime)
            })
            if(!num){
              this.isOpen = true
            }
            if(num == 1){
              this.isXudan = true
            }
            if(num == 2){
              this.isRuchang = true
            }
            return
          }
          if(!num){
            title = '暂无订单，请先预约订单'
          }
          if(num == 1){
            title = '暂无续费订单，请先预约订单'
          }
          if(num == 2){
            title = '暂无提前入场订单'
          }
          wx.showModal({
            title: '温馨提示',
            confirmText: "知道了",
            showCancel: false,
            content: title,
          })
        }else{
          wx.hideLoading()
        }
      })
    },

    // 获取房间列表
    async getRoomList(){
      this.$showLoading('加载中...')
      let storeId = ''
      await getAllStore().then(res=>{
        if(res.statusCode == '00000'){
          storeId = res.data[0].id
          // storeId = '766639530495164416'
        }
      })
      let data = {
        storeId,
        latitude:getLatitude(),
        longitude:getLongitude()
      }
      await getStoreDetails(data).then(res=>{
        if(res.statusCode == '00000'){
          storeId = res.data.storeId
          if(res.data.distance != null){
            if(res.data.distance >= 1000){
              res.data.distance = (res.data.distance/1000).toFixed(1)+'km'
            }else{
              res.data.distance = res.data.distance+'m'
            }
          }
          this.storeMsg = res.data
        }else{
          wx.hideLoading()
        }
      })
      if(storeId){
        await getRoomByStoreId({storeId}).then(res=>{
          if(res.statusCode == '00000'){
            res.data.map(item=>{
              if(item.timeSlotList&&item.timeSlotList.length){
                item.timeSlotList.map(child=>{
                  child.startObj = this.getYearMonthDay(child.startTime)
                  child.endObj = this.getYearMonthDay(child.endTime)
                })
                item.recentlyYyMsg = item.timeSlotList.find(item => item.status == 0)
              }
            })
            console.log(res.data)
            this.list = res.data
            wx.hideLoading()
            wx.hideNavigationBarLoading();
            wx.stopPullDownRefresh();
          }else{
            wx.hideLoading()
          }
        })
      }
    },

    // 获取订单数量
    getOrderNum(){
      getOrderNum().then(res=>{
        if(res.statusCode == '00000'){
          this.orderNumMsg = res.data
        }
      })
    },

    // 获取年月日时分
    getYearMonthDay(time){
      const weekArr = ["周日","周一","周二","周三","周四","周五","周六"]
      let date = new Date(time)
      let obj = {}
      obj.year = date.getFullYear()
      obj.month = date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : (date.getMonth()+1)
      obj.ri = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      obj.hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      obj.minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      obj.week = weekArr[date.getDay()]
      return obj
    },

    // 开门
    openDoor:Debounce(function (num,id) {
      if(!this.openClick){
        this.openClick = true
        this.$showLoading('开门中...')
        let returnData = !num?unStoreLock({orderId:id}):orderUnLock({orderId:id})
        returnData.then(res=>{
          if(res.statusCode == '00000'){
            this.openClick = false
            wx.hideLoading()
            this.$toast('开门成功')
          }else{
            this.openClick = false
            wx.hideLoading()
            this.$toast(res.message)
          }
        })
      }
    },300),

    // 开门-弹窗
    openDoorClick(){
      if(this.storeMsg.underwayOrderList.length){
        this.isOpen = true
        return
      }
      wx.showModal({
        title: '温馨提示',
        confirmText: "知道了",
        showCancel: false,
        content: '你还没预约房间，请先预约房间',
      })
    },

    // 跳转续单
    toXudan(item){
      let timeLength = this.getHour(item.startTime,item.endTime)
      
      let info = {
        endTime:item.endTime,
        orderId:item.orderId,
        price:item.price,
        roomId:item.roomId,
        roomName:item.roomName,
        serviceTime:timeLength,
        startTime:item.startTime
      }
      console.log(info)
      info.endTime = info.endTime.replace(/-/g, '/')
      info.startTime = info.startTime.replace(/-/g, '/')
      wx.navigateTo({
        url: `/pages/renewalOrder/main?info=${JSON.stringify(info)}`,
      });
    },

    // 算选择多少小时
    getHour(s1, s2) {
      var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
      s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/'));
      s2 = new Date((reDate.test(s2) ? s2 : '2018-1-1 ' + s2).replace(/-/g, '/'));
      var ms = s2.getTime() - s1.getTime();
      if (ms < 0) return 0;
      return ms / 1000 / 60 / 60;  //小时
    },

    // 提前入场-弹窗
    // toAdvance(){
    //   entryJudge().then(res=>{
    //     if(res.statusCode == '00000'){
    //       if(res.data.length){
    //         this.judgeList = res.data
    //         this.isRuchang = true
    //         return
    //       }
    //       wx.showModal({
    //         title: '温馨提示',
    //         confirmText: "知道了",
    //         showCancel: false,
    //         content: '暂无需要提前入场订单',
    //       })
    //     }
    //   })
      // if(this.storeMsg.underwayOrderList.length){
      //   this.isRuchang = true
      //   return
      // }
      // wx.showModal({
      //   title: '温馨提示',
      //   confirmText: "知道了",
      //   showCancel: false,
      //   content: '你还没预约房间，请先预约房间',
      // })
      
    // },

    // 跳转提前入场
    toRuchang(item){
      let timeLength = this.getHour(item.startTime,item.endTime)
      let info = {
        endTime:item.endTime,
        orderId:item.orderId,
        price:item.price,
        roomId:item.roomId,
        roomName:item.roomName,
        serviceTime:timeLength,
        startTime:item.startTime
      }
      console.log(info)
      info.endTime = info.endTime.replace(/-/g, '/')
      info.startTime = info.startTime.replace(/-/g, '/')
      wx.navigateTo({
        url: `/pages/advance/main?info=${JSON.stringify(info)}`,
      });
    },

    // 续单-弹窗
    openXudanClick(){
      if(this.storeMsg.underwayOrderList.length){
        this.isXudan = true
        return
      }
      wx.showModal({
        title: '温馨提示',
        confirmText: "知道了",
        showCancel: false,
        content: '你还没预约房间，请先预约房间',
      })
    },

    // 跳转新手指南
    toNovice(){
      wx.navigateTo({
        url: `/pages/novice_guide/main`,
      });
    },

    // 跳转充值
    toJifen(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/recharge/main`,
      });
    },

    // 跳转团购
    toWriteOff(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/writeOff/main`,
      });
    },

    // 房间详情
    toRoom(item){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      if(item.status == 'stop'){
        this.$toast('整备中，敬请期待！')
        return
      }
      wx.navigateTo({
        url: `/pages/room_xq/main?roomId=${item.id}`,
      });
    },

    // 获取位置
    getUserLocation(){
      let _this = this;
      if(!getLatitude()){
        _this.getRoomList()
      }
      wx.getLocation({
        type:'gcj02',
        success(res) {
          // 存经纬度
          setLatitude(res.latitude)
          setLongitude(res.longitude)
          _this.getRoomList()
      },fail: function () {
          wx.showModal({
              title: '开启位置授权',
              content: '无法获取当前定位，请开启位置授权才能操作哦~',
              confirmText: "去开启",
              success: function(res) {
              if (res.confirm) {
                  wx.getSetting({
                  success(res) {
                      if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
                      wx.openSetting({
                          success(res) {
                          wx.getLocation({
                              type:'gcj02',
                              success(res1) {
                                // 存经纬度
                                setLatitude(res1.latitude)
                                setLongitude(res1.longitude)
                                _this.getRoomList()
                              }
                          })
                          }
                      })
                      }  else { // 第一次授权，或者已授权，直接调用相关api
                      }
                  }
                  })
              } else if (res.cancel) {
              console.log('用户点击取消')
              }
              }
          })
        }
      });
    },
  },
  onShow() {
    this.getHongDong()

    this.getStarMsg()
    this.getUserLocation()
    if (wx.canIUse("getUpdateManager")) {
      console.log("进去版本检测------->");
      const updateManager = wx.getUpdateManager();
      updateManager.onCheckForUpdate(function (res) {
        if (res.hasUpdate) {
          //下载成功
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: "更新提示",
              content: "新版本已经准备好，是否重启应用？",
              success: function (res) {
                if (res.confirm) {
                  updateManager.applyUpdate();
                }
              },
            });
          });
          //下载失败
          updateManager.onUpdateFailed(function () {
            wx.showModal({
              title: "已经有新版本了哟~",
              content: "新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~",
            });
          });
        } else {
          console.log("最新版本-------》");
        }
      });
    } else {
      wx.showModal({
        title: "提示",
        content:
          "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
      });
    }
    this.getOrderNum()
  },
  onLoad(options){
    
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
            self.titleBarHeight = 44;
        } else {
            self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      },
    });
  },
  onTabItemTap(){
    wx.vibrateShort({type:'heavy'});
    // this.getRoomList()
  },
  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.getRoomList()
  },
  onUnload() {
    this.huodongShow = false
  },
  onPageScroll(e){
    this.getElInfo()
  },
  onShareAppMessage() {
    return {
      title: '杠小二共享棋牌室',
      path: `/pages/home/main`,
      imageUrl:'https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230718/vSumUOfjoOmPQAX85LXA.png'
    }
  },
};
</script>

<style lang="scss" scoped>
.content_box {
  min-height: 100vh;
  padding-bottom: 50rpx;
  background: #F5F5F5;
  .top_box{
    position: fixed;
    top:0;
    left: 0;
    z-index: 20;
    .back_box{
      display: flex;
      align-items: center;
      .back{
        width: 60rpx;
        height: 60rpx;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left:30rpx;
        color:#fff;
        font-weight: bold;
      }
    }
  }
  .head_box{
    .swiper{
      min-height: 366rpx;
    }
  }
  .pop_box{
    /deep/ .van-popup {
      border-top-right-radius: 32rpx !important;
      border-top-left-radius: 32rpx !important;
    }
    .box{
      .title{
        height: 104rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #111111;
        border-bottom:1px solid #F8F8F8;
        position: relative;
        .tb{
          position: absolute;
          right:30rpx;
          color:#999999;
          font-size:40rpx;
        }
      }
      .list{
        height: 104rpx;
        padding:0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
          font-size:32rpx;
          color:#323233;
          span{
            font-size:28rpx;
            color:#F04925;
          }
        }
        .icon{
          width: 176rpx;
          height: 64rpx;
          line-height: 64rpx;
          background: #00C200;
          border: 2rpx solid #00C200;
          border-radius: 50rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #FFFFFF;
          text-align: center;
        }
        img{
          width: 32rpx;
          height: 32rpx;
          margin-right:10rpx;
        }
      }
      .line{
        width: 100%;
        height: 16rpx;
        background: #f8f8f8;
      }
      .quxiao{
        height: 100rpx;
        line-height: 100rpx;
        font-size:32rpx;
        color:#323233;
        text-align: center;
      }
    }
  }
  .store_msg_box{
    margin:0 auto;
    margin-top:-50rpx;
    background: #fff;
    position: relative;
    z-index: 50;
    border-radius: 16rpx;
    padding-bottom:1rpx;
    width: 92%;
    .msg_box{
      border-top-right-radius: 20rpx;
      border-top-left-radius: 20rpx;
      position: relative;
      height: 194rpx;
      img{
        width: 100%;
        height: 194rpx;
        position: absolute;
        top:0;
        right:0;
        z-index: -1;
      }
    }
    .juli{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:16rpx 32rpx;
      .num{
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #666;
        display: flex;
        align-items: center;
        img{
          width: 20rpx;
          height: 24rpx;
          margin-right:8rpx;
        }
      }
      .anniu{
        display: flex;
        p{
          width: 124rpx;
          height: 52rpx;
          line-height: 52rpx;
          background: #F7F7F7;
          border-radius: 26rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #111111;
          margin-left:32rpx;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            width: 24rpx;
            height: 24rpx;
            margin-right:8rpx;
          }
        }
      }
    }
    .msg{
      display: flex;
      justify-content: space-between;
      padding:24rpx 32rpx 0 32rpx;
      .name_box{
        .name{
          font-size: 32rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #111111;
          margin-bottom:16rpx;
        }
        .label_box{
          display: flex;
          p{
            display: inline-block;
            padding:0 12rpx;
            height: 40rpx;
            line-height: 40rpx;
            background: #FFFFFF;
            border: 2rpx solid #00C200;
            border-radius: 10rpx;
            margin-right:16rpx;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00C200;
          }
        }
      }
    }
    .dz{
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #111111;
      margin-top:16rpx;
      margin-left:32rpx;
    }
  }
  .three_box{
    margin:24rpx 32rpx 0 32rpx;
    display: flex;
    justify-content: space-between;
    .left{
      width: 336rpx;
      height: 200rpx;
      position: relative;
      img{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
      }
      .nr{
        position: relative;
        padding:20rpx 32rpx;
        .name{
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
          margin-bottom:10rpx;
        }
        .text{
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #666;
        }
        .anniu{
          width: 152rpx;
          height: 56rpx;
          line-height: 56rpx;
          background: #00C200;
          border-radius: 38rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          text-align: center;
          margin-top:20rpx;
          position: relative;
          span{
            display: inline-block;
            width: 26rpx;
            height: 26rpx;
            line-height: 26rpx;
            background: #F04925;
            border-radius: 50%;
            color:#fff;
            font-size:18rpx;
            position: absolute;
            top:-4rpx;
            right:-4rpx;
          }
        }
        
      }
    }
    .right{
      width: 334rpx;
      .box{
        position: relative;
        width: 334rpx;
        height: 94rpx;
        margin-bottom:12rpx;
        img{
          width: 100%;
          height: 100%;
          position: absolute;
          top:0;
          left: 0;
        }
        .nr{
          position: relative;
          padding:12rpx 32rpx;
          .name{
            font-size: 28rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #111111;
            margin-bottom:2rpx;
            position: relative;
            display: inline-block;
            padding-right:20rpx;
            span{
              display: inline-block;
              width: 15rpx;
              height: 15rpx;
              line-height: 26rpx;
              background: #F04925;
              border-radius: 50%;
              font-size:18rpx;
              position: absolute;
              top:0rpx;
              right:0rpx;
              text-align: center;
            }
          }
          .text{
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #666;
            &.on{
              color: #F04925;
            }
          }
        }
      }
      
    }
  }

  .tab_box{
    margin:16rpx 32rpx 0 32rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    .star_box{
      width: 100%;
      position: relative;
      height: 140rpx;
      .bj{
        width: 100%;
        position: absolute;
        top:0;
        height: 100%;
      }
      .star{
        display: flex;
        align-items: center;
        padding:26rpx 24rpx 10rpx 24rpx;
        position: relative;
        z-index: 10;
        .title_box{
          display: flex;
          align-items: center;
          margin-right:28rpx;
          .line{
            width: 6rpx;
            height: 28rpx;
            background: #00C200;
            border-radius: 4rpx;
            margin-right:16rpx;
          }
          .title{
            font-size: 28rpx;
            font-weight: 500;
          }
        }
        .xx{
          display: flex;
          p{
            position: relative;
            margin-right:4rpx;
            &:last-child{
              margin-right:0;
            }
            span{
              position: absolute;
              top:0;
              left: 0;
              display: inline-block;
              width: 100%;
              height: 100%;
              text-align: center;
              font-size: 20rpx;
              text-align: center;
              line-height: 36rpx;
              color:#fff;
            }
            img{
              width: 36rpx;
              height: 36rpx;
            }
          }
        }
      }
      .time_box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0 24rpx 10rpx 24rpx;
        position: relative;
        z-index: 10;
        font-size:24rpx;
        color:#999999;
        .left{
          display: flex;
          .text{
            color:#111111;
            margin-left:32rpx;
            span{
              color:#FF6600;
            }
          }
        }
        .right{
          span{
            color:#FF6600;
          }
        }
      }
    }
    .tab{
      height: 160rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .box{
      width: 25%;
      text-align: center;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #111111;
      img{
        width: 64rpx;
        height: 64rpx;
      }
    }
  }
  .lanmu_box{
    
    
    margin:30rpx 32rpx 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .box{
      width: 48%;
      display: flex;
      align-items: center;
      background: #FFFFFF;
      border-radius: 16rpx;
      height: 150rpx;
      .text{
        font-size:26rpx;
      }
      .icon{
        width: 80rpx;
        height: 80rpx;
        background: #aaa;
        margin-left:10rpx;
      }
    }
    .line{
      width: 1px;
      height: 50rpx;
      background: #aaa;
    }
  }
  .list_box{
    .title_box{
      text-align: center;
      margin:34rpx 0 24rpx 0;
      img{
        width: 248rpx;
        height: 74rpx;
      }
    }
    .box{
      margin:0 32rpx 24rpx 32rpx;
      background: #fff;
      padding:16rpx 28rpx 24rpx 16rpx;
      border-radius: 20rpx;
      box-shadow: 0rpx 32rpx 40rpx 0rpx rgba(34,35,53,0.04);
      .box_b{
        display: flex;
        .img{
          height: 310rpx;
          position: relative;
          .mc{
            position: absolute;
            bottom:0;
            left: 0;
            width: 100%;
            height: 48rpx;
            line-height: 48rpx;
            border-bottom-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            &.on{
              background: rgba(240, 73, 37, 0.9);
            }
            &.on1{
              background: rgba(0, 194, 0, 0.9);
            }
            &.on2{
              background: rgba(255, 133, 21, 0.9);
            }
            &.on3{
              background: rgba(58, 119, 229, 0.9);
            }
            &.on4{  
              background: rgba(154, 165, 187, 0.9);
            }
          }
        }
        .right{
          flex: 1;
          margin-left:16rpx;
        }
      }
      .msg{
        display: flex;
        justify-content: space-between;
        margin-bottom:0rpx;
        .left{
          .name{
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #111111;
          }
          .label_box{
            margin-top:12rpx;
            p{
              display: inline-block;
              padding:0 12rpx;
              height: 40rpx;
              line-height: 40rpx;
              background: #FFFFFF;
              border: 2rpx solid #00C200;
              border-radius: 10rpx;
              margin-right:16rpx;
              font-size: 22rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #00C200;
              margin-bottom:10rpx;
              &:last-child{
                margin-right:0;
              }
            }
          }
        }
      }
      .price_box{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-top:10rpx;
        .price{
          font-size: 22rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #111111;
          .close{
            text-decoration:line-through;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #999999;
          }
          .old{
            span{
              font-size:34rpx;
              font-weight: bold;
            }
          }
          .new{
            display: flex;
            align-items: baseline;
            color: #00C200;
            margin-top:8rpx;
            font-size: 24rpx;
            .tc{
              display: inline-block;
              width: 56rpx;
              height: 34rpx;
              line-height: 34rpx;
              background: rgba(0, 194, 0, 0.1);
              border-radius: 6rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              font-size: 20rpx;
              color: #00C200;
              text-align: center;
              margin-right:8rpx;
              position: relative;
              top:-2rpx;
            }
            .num{
              font-size:34rpx;
              font-weight: bold;
            }
          }
        }
        .num1{
          color:#999999;
          font-size:22rpx;
          text-align: center;
          position: relative;
          bottom:20rpx;
        }
        .anniu{
          width: 128rpx;
          height: 56rpx;
          line-height: 56rpx;
          background: #00C200;
          border-radius: 38rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          text-align: center;
          position: relative;
          top:-6rpx;
          &.on{
            background:#9AA5BB;
          }
        }
      }
      .to_nr{
        transform: skewX(-30deg);
        position: relative;
        .sjx{
          position: absolute;
          right:-14rpx;
          bottom:0rpx;
          transform: skewX(30deg);
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;  
          border-right: 8rpx solid transparent;  
          border-bottom: 10rpx solid #CF6D26; 
        }
        .sjx_on{
          border-bottom-color:#555;
        }
      }
      .bottom_nr{
        position: relative;
        div {
          transform: skewX(30deg);
        }
        .sjx{
          position: absolute;
          right:-14rpx;
          bottom:0rpx;
          transform: skew(0deg);
          width: 0;
          height: 0;
          border-top: 10rpx solid #CF6D26;
          border-right: 8rpx solid transparent;
          border-left: 8rpx solid transparent;
        }
        .sjx_on{
          border-top-color:#555;
        }
      }
    }
  }
  .nodata{
    text-align: center;
    color:#999999;
    font-size:24rpx;
  }
}
.yd_box{
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #FF8515;
  margin-top:30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  p{
    display: flex;
    align-items: center;
  }
  img{
    width: 28rpx;
    height: 28rpx;
    margin-right:12rpx;
  }
}
.yy_pop_box{
  /deep/ .van-popup {
    background: none;
    width: 580rpx;
  }
  .box{
    width: 100%;
    height: 710rpx;
    font-size:28rpx;
    .bj{
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      z-index: 1;
    }
    .nr{
      position: relative;
      z-index: 10;
      margin:0 20rpx 0 20rpx;
      padding-top:250rpx;
      .nr_box{
        height: 260rpx;
        overflow-y: scroll;
      }
      .list{
        display: flex;
        justify-content: space-between;
        padding-left:20rpx;
        position: relative;
        height: 90rpx;
        .line{
          width: 2rpx;
          height: 90rpx;
          background: #E8E8E8;
          position: absolute;
          left: 10rpx;
        }
        .time_box{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          left: -20rpx;
          .quan{
            width: 18rpx;
            height: 18rpx;
            background: #FFFFFF;
            border: 2rpx solid #FF8515;
            border-radius: 50%;
            margin-right:18rpx;
          }
          .time{
            position: relative;
            width: 100%;
            height: 58rpx;
            line-height: 58rpx;
            background: #FFFFFF;
            font-size: 26rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FF8515;
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top:0;
            }
            .text{
              
              display: flex;
              justify-content: space-between;
              position: relative;
              z-index: 10;
              margin:0 28rpx;
            }
          }
        }
        &.on{
          .quan{
            border-color:#F04925
          }
          .text{
            color:#F04925;
          }
        }
      }
    }
    .anniu{
      width: 434rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: #00C200;
      border-radius: 40rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      position: relative;
      z-index: 10;
      margin:58rpx auto 0 auto;
      text-align: center;
    }
  }
}

.wifi_pop{
    /deep/ .van-popup {
      background: none;
      width: 530rpx;
    }
    .box{
      width: 530rpx;
      height: 616rpx;
      position: relative;
      .bj{
        width: 530rpx;
        height: 616rpx;
        top:0;
        left: 0;
        position: absolute;
      }
      .nr{
        position: relative;
        z-index: 10;
        width: 80%;
        margin:0 auto;
        top:280rpx;
        .zhanghao{
          background: #F4FFF4;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
          padding:32rpx;
          border-radius: 16rpx;
          
          p{
            &:nth-of-type(1){
              margin-bottom:24rpx;
            }
          }
        }
        
      }
      .anniu{
        height: 80rpx;
        line-height: 80rpx;
        background: #00C200;
        border-radius: 40rpx;
        margin-top:48rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
      }
      .anniu1{
        width: 434rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #00C200;
        border-radius: 40rpx;
        margin:0 auto;
        margin-top:40rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        position: relative;
        top:250rpx;
      }
      .nr1{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-bottom:48rpx;
        position: relative;
        top:280rpx;
      }
      button::after {
        border: none;
      }
      button{
        background: none;
        color:#222;
        margin:0;
        .img{
          width: 160rpx;
          height: 160rpx;
          background: #F8F8F8;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          flex-direction:column;
          justify-content: center;
          .img1{
            width: 70rpx;
            height: 70rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
              width: 56rpx;
              height: 48rpx;
            }
          }
          .img2{
            width: 70rpx;
            height: 70rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
              width: 42rpx;
              height: 56rpx;
            }
          }
        }
        .text{
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #111111;
          text-align: center;
        }
      }
    }
    .close{
      width: 64rpx;
      height: 64rpx;
      margin:32rpx auto 0 auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .pop_box1{
    background: #fff;
    position: fixed;
    top:0;
    z-index: 100;
    width: 100%;
    box-shadow: 0rpx 10rpx 20rpx 4rpx rgba(139,129,114,0.1);
    padding-bottom:10rpx;
    .box{
      display: flex;
      align-items: center;
      padding:0 40rpx;
      img{
        width: 260rpx;
        height: 70rpx;
      }
    }
  }
.huodong_pop{
  /deep/ .van-popup {
    background: none;
    width: 656rpx;
  }
  .box{
    width: 656rpx;
    height: 958rpx;
    position: relative;
    .bj{
      width: 656rpx;
      height: 958rpx;
      top:0;
      left: 0;
      position: absolute;
    }
    .anniu2{
      position: absolute;
      bottom:50rpx;
      z-index: 10;
      width: 100%;
      p{
        width: 538rpx;
        height: 100rpx;
        line-height: 100rpx;
        background: #00C200;
        border-radius: 50rpx;
        font-size: 40rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        margin:0 auto;
      }
    }
    .nr2{
      position: absolute;
      z-index: 10;
      width: 100%;
      margin:0 auto;
      bottom:240rpx;
      height: 150rpx;
      .nr2_box{
        width: 82%;
        height: 150rpx;
        margin:0 auto;
        display: flex;
        align-items: center;
        .left{
          display: flex;
          justify-content: center;
          align-items: baseline;
          width: 50%;
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FE6706;
          span{
            font-size: 70rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #FE6706;
          }
        }
        .right{
          width: 48%;
          text-align: center;
          .name{
            width: 80%;
            font-size: 34rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin:0 auto;
            margin-bottom:6rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .text{
            width: 80%;
            margin:0 auto;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #B5B5B5;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
.dh_fl{
  position: fixed;
  right: 30rpx;
  top:70%;
  z-index: 20;
  border-radius: 50%;
  width: 150rpx;
  height: 130rpx;
  text-align: center;
  color:#fff;
  font-size: 28rpx;
  font-weight: 500;
  img{
    width: 100%;
    height: 100%;
  }
}
</style>